<template>
<div class="nav">
	    <div class="nav-def" :style="{background:headerBg}">
          <div class="logo-wrapper">
            <img src="../../assets/images/logo.svg"/>
          </div>
          <Dropdown class="nav-lang">
              <a href="javascript:void(0)">
                  {{this.$t('lang')}}
                  <Icon type="ios-arrow-down"></Icon>
              </a>
              <DropdownMenu slot="list">
                  <DropdownItem @click.native='changeLanguage("zh")'>中文</DropdownItem>
                  <DropdownItem @click.native='changeLanguage("en")'>EN</DropdownItem>
              </DropdownMenu>
          </Dropdown>
          <Menu mode="horizontal" :theme="theme1" 
              :active-name="activeName"
              class="nav-ul"
              >
              <!-- <router-link to="/login" class="link">
                  <MenuItem name="2">
                      <Icon type="ios-paper" />
                      登录
                  </MenuItem>
              </router-link>
              <router-link to="/home" class="link">
                  <MenuItem name="1">
                      <Icon type="ios-paper" />
                      首页
                  </MenuItem>
              </router-link> -->
              <div v-for="item in this.$t('app.nav')">
                <router-link :to="item.url">
                  <MenuItem :name="item.name"> 
                    {{item.text}}
                  </MenuItem>
                </router-link>
              </div>
          </Menu>
      </div>

      <div class="nav-mini">
            <Button @click="isOpenMiniMenu = true" class="nav-btn">
              <Icon type="ios-menu" />
            </Button>
            <Drawer title="Menu" :closable="false" v-model="isOpenMiniMenu">
                <ul class="menu-mini-ul">
                    <li v-for="item in this.$t('app.nav')" 
                        @click="handleMenuChange(item.url)"
                        :class="item.name == activeName ? 'ivu-menu-item-active' : ''"
                    >
                        {{item.text}}
                    </li>
                </ul>
            </Drawer>
            <Dropdown class="nav-mini-lang">
                <a href="javascript:void(0)">
                    {{this.$t('lang')}}
                    <Icon type="ios-arrow-down"></Icon>
                </a>
                <DropdownMenu slot="list">
                    <DropdownItem @click.native='changeLanguage("zh")'>中文</DropdownItem>
                    <DropdownItem @click.native='changeLanguage("en")'>EN</DropdownItem>
                </DropdownMenu>
            </Dropdown>
        </div>

	</div>
</template>
<script>
export default {
  name: "CommonNav",
  props: {
    imgHeight: {
      type: Number
    },
    activeName: {
      type: String
    }
  },
  data() {
    return {
      isOpenMiniMenu: false,
      theme1: "light",
      logourl: '../../assets/images/img2.jpg',
	    headerBg: "rgba(255, 255, 255, .3)",
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    changeLanguage (type) {
      this.$i18n.locale = type;
      window.localStorage.setItem("language", type);
    },
    handleMenuChange (url) {
      this.isOpenMiniMenu = false;
      this.$router.push(url);
    },
    handleScroll: function() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop > this.imgHeight - 60) {
        this.headerBg = "rgba(245,245,245,1)";
      } else {
        this.headerBg = "rgba(255, 255, 255, .3)";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.nav-btn{
     float: right;
     margin: 14px;
}
.nav-ul {
    max-width: calc(100% - 194px);
    float: right;
    width: calc(90px * 5); //导航列表数量
    li {
        width: 90px;
        padding:0 20px;
        line-height: 60px;
        float: left;
    }
}
.nav-lang{
    float: right;
    padding-left: 20px;
    line-height: 60px;
    a{
      color: $gColor;
      font-size: $gFontSize;
    }
}

.nav-mini-lang{
    float: right;
    padding-left: 20px;
    line-height: 60px;
    a{
      color: $gColor;
      font-size: $gFontSize;
    }
}
.ivu-menu-item{
  text-align: center
}
.ivu-menu-horizontal.ivu-menu-light:after{
  background: none;
}
.ivu-menu-item-active{
    a{
        color: $bColor;
    }
}
</style>


